<template>
  <div class="zombieVehiclesWrap">
    <div class="mapContentWrap">
      <div class="infoSearchOneWrap">
        <el-row :gutter="0">
          <!--<el-col :span="16" style="line-height: 28px;">
            <el-radio-group  size="mini" v-model="radio3" @change="changeRadio(1)">
              <span >
                <span style="display: inline-block;"><el-radio-button :label="t1">全部</el-radio-button></span>
                <span class="companyInfoSty">458785</span>
              </span>
              <span v-for="(item, index) in $store.state.companyInfos" :key="index">
                <span style="display: inline-block;"><el-radio-button :label="item.enterpriseId">{{item.enterpriseName}}</el-radio-button></span>
                <span class="companyInfoSty">{{item.count}}</span>
              </span>
              &lt;!&ndash;<el-radio-button v-for="(item, index) in allCompaniesBtn" :key="index" :label="item.enterpriseId">{{item.enterpriseName}}
              </el-radio-button><span class="companyInfoSty">5635</span>&ndash;&gt;
            </el-radio-group>
          </el-col>-->
          <el-col :span="8">
            <el-row :gutter="0">
              <el-col :xs="10" :sm="8" :md="5" :lg="5">
                <span style="vertical-align: middle;line-height: 28px;margin-left: 10px;">行政区域:</span>
              </el-col>
              <el-col :xs="12" :sm="14" :md="18" :lg="18">
                <el-row>
                  <el-col :span="12">
                    <el-select v-model="districtId" @change="checkDistrict" size="mini" :disabled="$store.state.userInfo.regionId?true:false" clearable placeholder="全部">
                      <el-option
                        v-for="item in $store.state.districtData"
                        :key="item.districtId"
                        :label="item.districtName"
                        :value="item.districtId">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="12">
                    <el-select v-model="streetId" @change="getAreaControlInfo" size="mini" clearable placeholder="全部">
                      <el-option
                        v-for="item in options3"
                        :key="item.streetId"
                        :label="item.streetName"
                        :value="item.streetId">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div class="containerWrap" ref="mapScreenfull">
        <div class="infoButton">
          <i @click='screenfullMap' :class="iconFull"></i>
        </div>
        <div class="colorWrap">
          <div v-for="(item,index) in companyColor" :key="index">
            <span class="colorlist" :style="'background-color:'+item.color"></span>{{item.enterpriseName}}<br/>
          </div>
        </div>
        <div id="container"> </div>
      </div>
    </div>
  </div>
</template>

<script>


  import bikeData from '../../../store/data'
  export default {
    props: [],
    data () {
      return {
        iconFull: "iconfont icon-quanping",
        options1: [],
        radio3: '',
        t1: "",
        scrollMap: "",
        districtId: this.$store.state.userInfo.regionId,
        streetId: "",
        districtId1: "",
        enterpriseId: "",
        oldEnterpriseId: "",
        allCompanies: this.$store.state.companyInfos,
        allCompaniesBtn: [{
          enterpriseName: "全部",
          enterpriseId: "",
        }],
        options2: [{
          value: '0',
          label: '正常车辆'
        }, {
          value: '1',
          label: '僵尸车辆'
        }, {
          value: '2',
          label: '违规车辆'
        }, {
          value: '3',
          label: '故障车辆'
        }],
        mapDataCount: "",
        mapData: [],
        dataM: [{geometry: {type: 'Point', coordinates: [113.95662, 22.530658]}, count: 1}, {
          geometry: {
            type: 'Point',
            coordinates: [113.95682, 22.530668]
          }, count: 2
        }],
        isTrue: true,
        roomMap: 12,
        firstKey: 0,
        mapOptions: [],
        map: {},
        redDataInfo: [],
        splitMapList: {other: 'pink', 14: "pink", 16: "pink"},
        companyColor: this.$store.state.companyInfos,
        MapPage: 0,
        isTrue: true,
        searchMap: {
          enterpriseId: ""
        },
      }
    },
    mounted(){
      document.querySelector(".mapContentWrap").style.height = document.querySelector(".zombieVehiclesWrap").clientHeight - 70 + "px"
      this.getHotMap()
      setTimeout(()=>{
        this.getMapInfo()
      })
    },
    destroyed(){
      this.removeHandler(this.map, "zoomend", this.zoomendMap)
    },
    created(){
      this.allCompanies.forEach((item) => {
        this.allCompaniesBtn.push(item)
      })
      /* //获取行政区
       this.axios.get(process.env.API_HOST + '/ulinkDistrict/getDistrict?cityId=1&provinceId=1')
       .then(response => {
       const result = response.data
       if (result.state == 0) {
       this.options1 = result.data
       }
       })*/
      //      获取首次数据
//      this.getMapInfo()


    },
    components: {},
    methods: {
      //删除事件监听兼容函数
      removeHandler (target, eventType, handler) {
        if (target.removeEventListener) {//主流浏览器
          let removeHandler = function (target, eventType, handler) {
            target.removeEventListener(eventType, handler, false);
          }
        } else {//IE
          let removeHandler = function (target, eventType, handler) {
            target.detachEvent("on" + eventType, handler);
          }
        }

      },
      changeRadio(index){
        this.enterpriseId = this.radio3

        this.mapData = []
        this.MapPage = 0
        this.getHotMap()
        setTimeout(()=>{
          this.getMapInfo()
        })
      },
      screenfullMap(){
        if (this.iconFull == "iconfont icon-quanping") {
          this.iconFull = "iconfont icon-quxiaoquanping"
          this.isFull=true
        } else if (this.iconFull == "iconfont icon-quxiaoquanping") {
          this.iconFull = "iconfont icon-quanping"
          this.isFull=false
        }
        if (this.screenfull.enabled) {
          this.screenfull.toggle(this.$refs.mapScreenfull);
        }
      },
      //     获取数据
      getMapInfo(){
        this.mapData=[]
        if (this.enterpriseId) {
         bikeData.bikeData.forEach(item=>{
           if(item.count==this.enterpriseId){
             this.mapData.push(item)
           }
         })
        }else {
          this.mapData = bikeData.bikeData
        }
        this.mapvSet()

        /*  let Mapurl = process.env.API_HOST + '/ulinkVehicle/distribution2?page=' + this.MapPage + "&enterpriseId=" + this.enterpriseId + "&districtId=" + this.districtId
         this.axios.get(Mapurl, {withCredentials: true})
         .then(response => {
         const result = response.data
         if (result.state === 0) {
         let dataInfo = result.data
         if (this.enterpriseId == dataInfo.enterpriseId && this.districtId == dataInfo.districtId) {
         this.MapPage++
         //                this.mapData[this.MapPage]=[]
         this.mapData[this.MapPage] = dataInfo.list

         }

         }
         })*/
      },
      MathRand(){
        var Num = "";
        for (var i = 0; i < 6; i++) {
          Num += Math.floor(Math.random() * 10);
        }
        return Num
      },

      getHotMap(){

        this.companyColor.forEach((item) => {
          this.splitMapList[item.enterpriseId + ""] = item.color
        })

        this.map = new BMap.Map("container", {
          enableMapClick: false,
          minZoom: 11,
          maxZoom: 19,

        });    // 创建Map实例

        this.map.centerAndZoom(new BMap.Point(114.03533, 22.615409), this.roomMap);  // 初始化地图,设置中心点坐标和地图级别
        this.map.addControl(new BMap.OverviewMapControl());
        this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
        this.map.addControl( new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));
        this.map.enableScrollWheelZoom(); // 允许滚轮缩放
        this.map.setMapStyle({
          styleJson: [
            {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": {
              "visibility": "on",
              "color": "#ccd6d7ff"
            }
          }, {
            "featureType": "green",
            "elementType": "geometry",
            "stylers": {
              "visibility": "on",
              "color": "#dee5e5ff"
            }
          }, {
            "featureType": "building",
            "elementType": "geometry",
            "stylers": {
              "visibility": "on"
            }
          }, {
            "featureType": "building",
            "elementType": "geometry.fill",
            "stylers": {
              "color": "#d1dbdbff"
            }
          }, {
            "featureType": "building",
            "elementType": "geometry.stroke",
            "stylers": {
              "color": "#aab6b6ff"
            }
          },
            /*{
              "featureType": "poilabel",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "manmade",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "building",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            }*/
          ]
        });
//        this.mapvSet()
      },
      mapvSet(){
        var dataSet = new mapv.DataSet(this.mapData);
        var options = {
          splitList: this.$store.state.splitMapColors,
          size: 1,
          draw: 'category'
        }
        new mapv.baiduMapLayer(this.map, dataSet, options);

      }
    },
    watch: {
      MapPage(){
        this.getMapInfo()
        this.mapvSet()
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"

  .zombieVehiclesWrap
    page()
    border-radius 5px
    .mapContentWrap
      width: 100%;
      margin 0 auto;
      position relative
      .infoSearchOneWrap
        width 100%
        margin-bottom 10px
        background-color white
        border-radius 5px
        padding 15px 20px 15px 20px;
        box-sizing border-box
        .companyInfoSty
          font-size: 14px;
          color: #3975FE;
          font-weight: bold;
          margin-left: 6px;
          margin-right: 10px;
          line-height: 24px;
          vertical-align: middle;
        .el-radio-button
          .el-radio-button__inner
            border-radius 10px
            padding 5px 15px
        .is-checked
          .el-radio-button__inner
            background-color: #3975FE
            border-radius 10px
            border-color #3975FE
      .containerWrap
        height: 100%;
        width: 100%;
        padding 10px
        box-sizing border-box
        background-color white
        border-radius 5px
        position: relative;
        .infoButton
          width 20px
          height 20px
          font-size: 16px;
          color: #3975FE;
          position: absolute;
          top: 20px;
          right: 20px;
          z-index 5
          opacity: 0;
          .iconfont
            color #3975FE
            display: inline-block;
            font-size: 20px;
            cursor pointer
        .colorWrap
          position: absolute;
          left 10px;
          top: 10px;
          background-color rgba(255,255,255,0.7)
          line-height 20px
          padding 10px
          border-radius 5px
          z-index: 5;
          color: black;
          margin-left: 60px;
          margin-top 10px;
          .colorlist
            display: inline-block;
            width: 10px;
            height 10px;
            border-radius: 50%;
            background-color: red;
            margin-right: 3px;
        #container
          height: 100%;
          width: 100%;
      &:hover .infoButton
        opacity: 1;
</style>
